Computer Smashing css: Graphic design by Andrew Clarke & Suraj Sahu

Author:Andrew Clarke & Suraj Sahu [Clarke , Andrew]
Language: eng
Format: azw3, pdf
Publisher: UNKNOWN
Published: 2018-12-01T16:00:00+00:00

#contain {width: 70em;}

Or even:

#contain {width: 90%; margin: 0 5%;}

The world is now your oyster. If you do this, though, make sure you keep the oyster from getting too skinny, like so:

#contain {width: 90%; min-width: 960px; margin: 0 5%;}

PART II: ESSENTIALS

EM-BASED LAYOUT

This technique is strikingly similar to the Fluid Grid technique, only here the layout dimensions are specified in ems instead of percentages.

As before, we’ll start with a layout mockup with some “top-level” measures placed over top and the associated CSS (see Figure 4-37). #contain {width: 1010px;}

#main, #extra {float: left;}

#main {width: 715px; padding: 20px 35px 20px 25px;}

#extra {width: 190px; padding: 20px 10px 20px 35px;}

144

Figure 4-37: Visualizing the layout sizes for the whole design. Great. Time once more for math. This time around, we divide all these numbers by the “baseline” font size we’re using in our page. This is generally the font size set for the body or html element. If you were to foreswear the use of all font-size, then the baseline font size in the vast majority of browsers would be 16 pixels, because that’s the default preference setting and almost nobody ever changes it. If, on the other hand, you said something like body {font-size: 0.8215em;}, then the baseline you’re setting is 13 pixels. Once you’ve determined the baseline, you divide all the pixel measures by that number. The resulting numbers will be in ems. Thus, assuming a 13-pixel baseline:

#contain {width: 77.692em;}

#main, #extra {float: left;}

#main {width: 55em; padding: 1.538em 2.692em 1.538em 1.923em;} #extra {width: 14.615em; padding: 1.538em 0.769em 1.538em 2.692em;}

Now the stuff inside the #main section. #main h2 {width: 575px; padding-left: 140px;} #main .info {float: left; width: 95px;} #main .text {float: right; width: 575px;}

Again, we divide it all by 13 (see Figure 4-38).

#main .info {float: left; width: 7.308em;} #main .text {float: right; width: 44.231em;}

145

Figure 4-38: Properly placing most of the pieces with ems. You probably noted that I left out the h2 containing the entry title. That’s because the size of the text in the h2 is bigger than the default, so we can’t just divide by 13. Let’s see what size it’s been given elsewhere in the CSS.

h2 {font-size: 1.6em;}

Okay, so its font size is 13 times 1.6, or 25.6. We therefore need to divide its two measures by 25.6 (see Figure 4-39).

#main h2 {width: 27.644em; padding-left: 6.731em;}

146

Figure 4-39: Correcting the heading’s placement. The math can get a little tricky, there’s no question. The beautiful part here is that if you bump the document’s baseline font size up or down, the whole layout will scale to match. For example, suppose you changed the CSS to say:

body {font-size: 90%;} That shifts the whole layout to be larger along with the text, which means line lengths are basically consistent, the layout hangs together, and it’s all nicely scalable for anyone who has different browser default settings or likes to bump the text size up or down for readability reasons.

As evident in Figure 4-40, though, it does mean that the layout may get wider than the browser window. That’s a potential downside of Em-Based Layout, and not one you can really get around.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.